<template>
  <div class="addUser-contanier">
    <div class="addUser-header">
      <h3>新增用户（带
        <span> * </span>为必填项）</h3>
    </div>
    <div class="addUser-content">
      <div class="addUser-listBox">
        <!--<div class="addUser-listRow">
          <div class="addUser-listCol1">
            <p>单位级别：</p>
          </div>
          <div class="addUser-listCol2">
            <el-radio-group v-model="level" @change="changeRadio">
              <el-radio label="1">一级单位</el-radio>
              <el-radio label="2">二级单位</el-radio>
            </el-radio-group>
            <el-select v-model="userInfo.Parent" placeholder="一级单位" :disabled="isOpera" size='mini' style="margin-left:25px;">
              <el-option v-for="item in parentData" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
            <span style="font-size:10px;">录入二级单位前，必须先选择上级一级单位</span>
          </div>
          </div>-->
        <div class="addUser-listRow">
          <div class="addUser-listCol1">
            <p>单位名称：</p>
          </div>
          <div class="addUser-listCol2">
            <select class="selected-row" v-model="one" placeholder="一级单位" size='mini' @change="selecteDeart">
              <option v-for="item in departments" :key="item.Name" :value="item">
                {{item.Name}}
              </option>
            </select>
            <select class="selected-row" v-model="tow" placeholder="二级单位" size='mini' style="margin-left:25px;">
              <option v-for="item in one.Childs" :key="item.Name" :value="item.Name">
                {{item.Name}}
              </option>
            </select>
            <span>*</span>
          </div>
        </div>
        <div class="addUser-listRow">
          <div class="addUser-listCol1">
            <p>登录名：</p>
          </div>
          <div class="addUser-listCol2">
            <el-input v-model="userInfo.LoginName"></el-input>
            <span>*</span>
          </div>
        </div>
        <div class="addUser-listRow">
          <div class="addUser-listCol1">
            <p>角色：</p>
          </div>
          <div class="addUser-listCol2">
            <el-radio-group v-model="userInfo.Role">
              <el-radio :label="0">普通用户</el-radio>
              <el-radio :label="2">管理员</el-radio>
              <el-radio :label="1">超级管理员</el-radio>
            </el-radio-group>
            <!--<el-checkbox v-model="checked"></el-checkbox>-->
          </div>
        </div>
        <div class="addUser-listRow">
          <div class="addUser-listCol1">
            <p>密码：</p>
          </div>
          <div class="addUser-listCol2">
            <el-input v-model="userInfo.Password" class="item-input"></el-input>
            <span>*</span>
          </div>
        </div>
        <div class="addUser-listRow">
          <div class="addUser-listCol1">
            <p>联络员姓名：</p>
          </div>
          <div class="addUser-listCol2">
            <el-input v-model="userInfo.Name" class="item-input"></el-input>
            <span>*</span>
          </div>
        </div>
        <div class="addUser-listRow">
          <div class="addUser-listCol1">
            <p>职务：</p>
          </div>
          <div class="addUser-listCol2">
            <el-input v-model="userInfo.Post" class="item-input"></el-input>
          </div>
        </div>
        <div class="addUser-listRow">
          <div class="addUser-listCol1">
            <p>办公电话：</p>
          </div>
          <div class="addUser-listCol2">
            <el-input v-model="userInfo.Telephone" class="item-input"></el-input>
          </div>
        </div>
        <div class="addUser-listRow">
          <div class="addUser-listCol1">
            <p>移动电话：</p>
          </div>
          <div class="addUser-listCol2">
            <el-input v-model="userInfo.Mobile" class="item-input"></el-input>
          </div>
        </div>
        <div class="addUser-listRow">
          <div class="addUser-listCol1">
            <p>传真：</p>
          </div>
          <div class="addUser-listCol2">
            <el-input v-model="userInfo.Fax" class="item-input"></el-input>
          </div>
        </div>
        <div class="addUser-listRow">
          <div class="addUser-listCol1">
            <p>分管领导：</p>
          </div>
          <div class="addUser-listCol2">
            <el-input v-model="userInfo.Boss" class="item-input"></el-input>
          </div>
        </div>
        <div class="addUser-listRow">
          <div class="addUser-listCol1">
            <p>办公电话：</p>
          </div>
          <div class="addUser-listCol2">
            <el-input v-model="userInfo.BossOfficePhone" class="item-input"></el-input>
          </div>
        </div>
        <div class="addUser-listRow">
          <div class="addUser-listCol1">
            <p>移动电话：</p>
          </div>
          <div class="addUser-listCol2">
            <el-input v-model="userInfo.BossMobile" class="item-input"></el-input>
          </div>
        </div>
        <div class="addUser-btn">
          <el-upload class="upload-demo" ref="upload" :action="baseUrl+'/api/User/import'" :on-error="errorMessage" :on-success="alertMessage"
            :show-file-list="false" :headers="header" :auto-upload="true">
            <el-button slot="trigger" size="small" type="primary">用户导入</el-button>
          </el-upload>
          <!--<form method="post" target="abc" ref="submitForm" :action="baseUrl+'/api/User/import'" enctype="multipart/form-data">
                  <a href="javascript:;" class="file">用户导入
                    <input type="file" name="file" @change="changeFn($event)">
                  </a>
                </form>-->
          <a class="downLoad" :href="baseUrl+'/template/user.xls'">下载模板</a>
          <el-button type="primary" @click="addUser">保存</el-button>
          <el-button type="info" @click="resetForm">重置</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        level: '1',
        header: {},
        isOpera: true,
        checked: false,
        departments: [],
        one: {},
        tow: '',
        userInfo: {
          Role: 0,
          DepartmentName: '',
          LoginName: '',
          Name: '',
          Type: '',
          Password: '000000',
          Post: '',
          Telephone: '',
          Mobile: '',
          Fax: '',
          Boss: '',
          BossOfficePhone: '',
          BossMobile: ''
        },
        parentData: [],
      }
    },
    methods: {
      // 单选按钮
      changeRadio() {
        this.isOpera = this.level == '1' ? true : false;
        this.userInfo.Parent = '';
      },
      changeFn(event) {
        this.$refs.submitForm.submit()
        this.$message({
          message: '操作成功!',
          type: 'success'
        });
      },
      alertMessage() {
        this.$message({
          message: '操作成功!',
          type: 'success'
        });
      },
      errorMessage(err) {
        this.$message({
          message: err.message,
          type: 'error'
        })
      },
      selecteDeart() {
        this.tow = ''
      },
      // 添加用户
      async addUser() {
        var user = this.userInfo
        user.DepartmentName = this.tow ? this.tow : this.one.Name;
        // user.Role = this.checked ? '1' : '0';
        if (user.DepartmentName && user.LoginName && user.Password && user.Name) {
          try {
            const result = await this.$post('/api/User', user)
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.resetForm();
          } catch (error) {
            this.$message.error(error.message)
          }
        } else {
          this.$message({
            message: '请填写完整信息',
            type: 'warning'
          })
        }
      },

      // 重置表单
      resetForm() {
        this.userInfo = {
          DepartmentName: '', LoginName: '',
          Name: '', Type: '',
          Password: '000000', Post: '',
          Telephone: '', Mobile: '', Fax: '',
          Boss: '', BossOfficePhone: '',
          BossMobile: ''
        }
      }
    },
    created() {
      this.$get("/api/User/AllDepartments").then((data) => {
        console.log(data, '单位列表')
        this.departments = data
        console.log(data)
      })
      this.showHome.isShow = false;
      try {
        this.header = { Authorization: 'Bearer ' + JSON.parse(localStorage.getItem("userInfo")).token }
      } catch (error) {

      }
    }
  }

</script>
<style lang="scss" scoped>
  .addUser-contanier {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .addUser-header {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    h3 {
      height: 50px;
      width: 300px;
      line-height: 50px;
      font-size: 16px;
      span {
        color: red;
        font-size: 22px;
      }
    }
  }

  .addUser-content {
    display: flex;
    height: 550px;
    width: 100%;
    margin-top: 10px;
    padding: 0 15px;
    overflow: auto;
    .addUser-listBox {
      height: 100%;
      width: 100%;
      border: 1px solid #dcdfe6;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
      display: flex;
      flex-direction: column;
      .addUser-listRow {
        height: 40px;
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom: 1px solid #dcdfe6;
        .addUser-listCol1 {
          display: flex;
          flex-direction: row;
          flex: 0.8;
          height: 40px;
          align-items: center;
          justify-content: flex-end;
          color: darkgray;
        }
        .addUser-listCol2 {
          display: flex;
          height: 40px;
          align-items: center;
          flex-direction: row;
          flex: 2;
          padding-left: 8px;
          span {
            margin-left: 10px;
            color: red;
            font-size: 16px;
          }
        }
      }
    }
  }

  .selected-row {
    height: 25px;
    outline: none;
    border-radius: 4px;
    min-width: 200px;
    border: 1px solid #dcdfe6;
  }

  .addUser-btn {
    margin-top: 15px;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
  }

  .file input {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
  }

  a.downLoad {
    display: inline-block;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 8px;
    text-decoration: underline;
    color: #1E88C7;
    text-decoration: underline;
    text-indent: 0;
    font-size: 14px;
    line-height: 20px;
    margin: 0 15px;
  }

  .el-input {
    width: 200px;
    height: 25px;
    line-height: 25px;
  }

  .el-button {
    padding: 8px 20px;
  }

  .el-input__inner {
    height: 30px;
    width: 300px;
  }
</style>